<template>
  <div class="joblist">
    <router-link 
      tag="div" 
      to="/detail" 
      class="jobitem" 
      v-for="item in jobList" 
      :key="item.id"
      @click.native="changeJobsId(item.jobs_id)"
    >
      <div class="jobitem-img">
        <img :src="item.company_logo" />
      </div>
      <div class="jobitem-name">{{item.jobs_name}}</div>
      <div class="jobitem-company">{{item.company_name}}-{{item.jobs_city}}</div>
      <div class="jobitem-salary">{{item.jobs_salary}}</div>
      <div class="jobitem-condition">{{item.jobs_condition}}</div>
      <div class="jobitem-describe">{{item.jobs_describe}}</div>
    </router-link >
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "HomeJoblist",
  props:{
    jobList: Array
  },
  computed:{
  },
  data() {
    return {
    };
  },
  methods: {
    changeJobsId(jobs_id){
      this.changejobs_id(jobs_id);
    },
    ...mapMutations(["changejobs_id"])

  }
};
</script>

<style lang="scss" scoped>
@import "~styles/varibles.styl";

.joblist {
  position: relative;
  top: -1rem;
  overflow: hidden;
  .jobitem {
    position: relative;
    height: 18vh;
    border-bottom: 1px solid #eaeaea;

    .jobitem-img {
      display: flex;
      justify-content: center; //内容水平居中
      align-items: center; //内容垂直居中

      height: 16vh;
      width: 20vw;
      img {
        width: 100%;
      }
    }
    .jobitem-name {
      position: absolute;
      top: 10%;
      left: 25vw;
      font-size: 0.35rem;
    }
    .jobitem-company {
      position: absolute;
      top: 35%;
      left: 25vw;
      font-size: 0.25rem;
    }
    .jobitem-salary {
      position: absolute;
      top: 10%;
      right: 5vw;
      font-size: 0.35rem;
      color: $bgColor;
    }
    .jobitem-condition {
      position: absolute;
      top: 55%;
      left: 25vw;
      font-size: 0.25rem;
    }
    .jobitem-describe {
      position: absolute;
      top: 75%;
      left: 25vw;
      padding: 0.1rem;
      font-size: 0.25rem;
      border: 1px solid rgb(252, 80, 80);
    }
  }
}
</style>